<template>
  <div class="left">
    <div class="pluginsRadio">
      <el-radio-group v-model="radio" class="ml-4">
        <el-radio
          @change="(val) => change(val)"
          v-for="(item, index) in plugins"
          :key="index"
          :label="item"
          >{{ item }}</el-radio
        >
      </el-radio-group>
    </div>

    <el-scrollbar height=" calc(100vh - 100px)">
      <div class="m10">
        <h4 class="">安装：</h4>
        <div class="mr20">
          npm install psd-ui-vue3
          <a class="fl" @click="copy('npm install psd-ui-vue3')"
            ><el-icon><DocumentCopy /></el-icon
          ></a>
        </div>
        <p class="fw600">引入：</p>
        <p class="mr20">
          import { {{ radio }} } from 'psd-ui-vue3';
          <a
            class="fl"
            @click="copy('import { ' + radio + ' } from \'psd-ui-vue3\';')"
            ><el-icon><DocumentCopy /></el-icon
          ></a>
        </p>
        <p class="fw600">
          使用：<a
            class="fl mr20"
            @click="
              copy(getContent(radio == 'Transfer' ? transferLabel : treeLabel))
            "
            ><el-icon><DocumentCopy /></el-icon
          ></a>
        </p>
        <div v-if="radio == 'Transfer'">
          <p v-for="(item, index) in transferLabel" :key="index">
            &nbsp;&nbsp;&nbsp;&nbsp;{{ item }}
          </p>
        </div>
        <div v-else>
          <p v-for="(item, index) in treeLabel" :key="index">
            &nbsp;&nbsp;&nbsp;&nbsp;{{ item }}
          </p>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import {
  Avatar,
  CloseBold,
  OfficeBuilding,
  DocumentCopy,
} from "@element-plus/icons-vue";
const proxy = getCurrentInstance();
const radio = ref("Transfer");
const plugins = ref(["Transfer", "Tree"]);

const transferLabel = [
  "<Transfer",
  " ref='transfer'",
  " :treeData='transferData'",
  " :showIcon='true'",
  " srarchDes='自定义搜索提示'",
  " :loading='loading'",
  " :searchEnable='true'",
  " :breadCrumbEnable='true'",
  " v-model:selectedIdList='selectedIdList'",
  " :disabledIdList='[]'",
  " checkAllLabel='全选'",
  " checkedLabel='已选'",
  ' :propsMap="{',
  " label: 'label',",
  " value: 'id',",
  " children: 'children',",
  " member: 'member',",
  " desId: 'orgId',",
  ' }"',
  " unit='人'",
  " >",
  " <template #memberIcon><Lock /></template>",
  " <template #childrenIcon><OfficeBuilding /></template>",
  " <template #unselectIcon><CloseBold /></template>",
  " <template #lowerLevelLabel>下级</template>",
  "</Transfer>",
];

const treeLabel = [
  "<Tree",
  ' ref="neu_tree"',
  ' :maxlevel="6"',
  '  placeholder="自定义搜索提示"',
  '  :dataSource="orgTree"',
  '  v-model:currentNodeKey="currentNodeKey"',
  '  :propsMap="{',
  "  children: 'children',",
  "  label: 'label',",
  "  value: 'id',",
  "  parentId: 'parentId',",
  "  disabled: 'disabled',",
  ' }"',
  ' :needOperate="true"',
  ' :operateMap="[1, 2, 3, 4]"',
  "/>",
];

// 对外暴露的参数
const props = defineProps({
  // change后回调
  radio: {
    type: String,
    default: "transfer",
  },
});

function change(val) {
  proxy.emit("update:radio", val);
}
function copy(value) {
  if (value) {
    value = value + "";
    if (window.isSecureContext) {
      navigator.clipboard.writeText(value).then((res) => {
        ElMessage.success("复制成功");
      });
    }
    //不安全域使用
    else {
      const textArea = document.createElement("textarea");
      document.body.appendChild(textArea);
      textArea.textContent = value;
      //选择
      textArea.select();
      //复制
      document.execCommand && document.execCommand("copy");
      document.body.removeChild(textArea);
      ElMessage.success("复制成功");
    }
  } else {
    ElMessage.warning("内容为空");
  }
}
function getContent(data) {
  let result = "";
  data.forEach((d) => {
    result += d + "\n";
  });
  return result;
}
</script>
<style lang="scss" scoped>
.left {
  width: 30%;
  float: left;
  height: 100%;
}

.element-plus-logo {
  width: 50%;
}
.m10 {
  margin: 10px;
}
.h80 {
  height: 80%;
  padding: 10px;
  border-radius: 4px;
}
.w25 {
  width: 25%;
}
.w50 {
  width: 50%;
}
.border {
  border: 1px solid #9093994f;
}
.p10 {
  padding: 10px;
}
.result {
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid #80808078;
}
.flr {
  float: right;
}
.w40 {
  width: 40%;
}
.pluginsRadio {
  border-bottom: 1px solid #9093994f;
}
.fw600 {
  font-weight: 600;
}
.code {
  color: var(--ep-color-primary);
}
.mr20 {
  margin-right: 20px;
}
.fl {
  float: right;
}
</style>
